<template>
	<view class="container">
		<view class="list-header">
			<!-- 搜索框 -->
			<view class="index-search-box dis-flex">
				<view class="index-search flex-box" @tap="triggerSearch">
					<view class="index-cont-search">
						<icon class="text-center" size="15" type="search"></icon>
						<text>{{ option.search ? option.search : '搜索商品' }}</text>
					</view>
				</view>
				<view @tap="onChangeShowState" class="list-right f-28">
					<text class="suifont sui-tubiao_kuaizhuangpailie" v-if="showView"></text>
					<text class="suifont sui-tubiao_liebiaopailie" v-else></text>
				</view>
			</view>
			<!-- 筛选标签 -->
			<view class="store_nav_cont dis-flex b-f b-b">
				<view @tap="switchSortType" data-type="all" class="flex-box t-c p-r" data-index="0 " :id="'list-' + (sortType === 'all' ? true : 0)"><text>综合</text></view>
				<view @tap="switchSortType" data-type="sales" class="flex-box t-c p-r" data-index="1" :id="'list-' + (sortType === 'sales' ? true : 0)"><text>销量</text></view>
				<view @tap="switchSortType" data-type="price" class="dis-flex flex-x-center flex-box t-c p-r" data-index="2" :id="'list-' + (sortType === 'price' ? true : 0)">
					<text class="price__text">价格</text>
					<view class="price__arrow dis-flex flex-dir-column flex-x-center flex-y-center">
						<text class="suifont sui-arrow-top" :class="{ active: !sortPrice }"></text>
						<text class="suifont sui-arrow-bottom" :class="{ active: sortPrice }"></text>
					</view>
				</view>
			</view>
			<!-- 商品列表 -->
			<scroll-view @scrolltolower="bindDownLoad" scroll-y style=" width: 750rpx;" v-if="list.data.length > 0" :style="{ height: scrollHeight + 'px' }">
				<view class="new">
					<view class="category-list" :class="{ arrange: showView }">
						<navigator class="list b-f" hover-class="none" :url="'../goods/index?goods_id=' + item.goods_id" v-for="(item, index) in list.data" :key="index">
							<view class="left">
								<view class="img"><image class="goodsImg" mode="scaleToFill" :src="item.goods_image"></image></view>
							</view>
							<view class="right">
								<view class="cont">
									<!-- 商品名称 -->
									<text class="title f-29 twolist-hidden">{{ item.goods_name }}</text>
									<block v-if="showView">
										<!-- 商品卖点 -->
										<view class="selling_point onelist-hidden">
											<text>{{ item.selling_point }}</text>
										</view>
										<!-- 商品销量 -->
										<view class="goods_sales dis-flex">
											<text class="onelist-hidden">已售{{ item.goods_sales }}件</text>
										</view>
									</block>
									<!-- 商品价格 -->
									<view class="detail-price onelist-hidden">
										<text class="goods-price f-30 col-m">￥{{ item.goods_sku.goods_price }}</text>
										<text class="line-price col-9 f-24" v-if="item.goods_sku.line_price > 0">{{ item.goods_sku.line_price }}</text>
									</view>
								</view>
							</view>
						</navigator>
					</view>
				</view>
				<view v-if="no_more" class="no-more f-30">亲, 没有更多了</view>
			</scroll-view>
		</view>
		<!-- 无数据 -->
		<view v-if="!isLoading && !list.data.length" class="yoshop-notcont" style="margin-top:130px;">
			<view class="img"><image mode="aspectFit" src="/static/images/no_content.png"></image></view>
			<text class="cont">亲, 没有相关内容</text>
		</view>
	</view>
</template>

<script>
const pageIndex = 'category/list::';
export default {
	data() {
		return {
			scrollHeight: null,

			showView: false, // 列表显示方式

			sortType: 'all', // 排序类型
			sortPrice: false, // 价格从低到高

			option: {}, // 当前页面参数
			list: { data: [] }, // 商品列表数据

			no_more: false, // 没有更多数据
			isLoading: true, // 是否正在加载中

			page: 1 // 当前页码
		};
	},
	onLoad(option) {
		this.option = option;
		this.setListHeight();
		this.getGoodsList();
	},
	methods: {
		/**
		 * 设置默认列表显示方式
		 */
		setShowView() {
			this.showView = uni.getStorageSync(pageIndex + 'showView') || false;
		},
		/**
		 * 设置商品列表高度
		 */
		setListHeight() {
			wx.getSystemInfo({
				success: res => {
					this.scrollHeight = res.windowHeight - 90;
				}
			});
		},
		/**
		 * 获取商品列表
		 * @param {bool} isPage 是否分页
		 * @param {number} page 指定的页码
		 */
		getGoodsList(isPage, page) {
			this.$u.api.getGoodsList({ page: page || 1, sortType: this.sortType, sortPrice: this.sortPrice ? 1 : 0, category_id: this.option.category_id || 0, search: this.option.search || '' }).then(res => {
				let resList = res.data.list;
				let dataList = this.list;
				if (isPage == true) {
					this.$set(this.list, 'data', dataList.data.concat(resList.data));
					this.isLoading = false;
				} else {
					this.list = res.data.list;
					this.isLoading = false;
				}
			});
		},
		/**
		 * 切换排序方式
		 */
		switchSortType(e) {
			let newSortType = e.currentTarget.dataset.type;
			let newSortPrice = newSortType === 'price' ? !this.sortPrice : true;
			this.list = {};
			this.$set(this.list, 'data', []);
			this.isLoading = true;
			this.page = 1;
			this.sortType = newSortType;
			this.sortPrice = newSortPrice;

			this.$nextTick(() => {
				this.getGoodsList();
			});
		},
		/**
		 * 下拉到底加载数据
		 */
		bindDownLoad() {
			// 已经是最后一页
			if (this.page >= this.list.last_page) {
				this.no_more = true;
				return false;
			}
			// 加载下一页列表
			this.getGoodsList(true, ++this.page);
		},
		/**
		 * 切换列表显示方式
		 */
		onChangeShowState() {
			let showView = !this.showView;
			uni.setStorageSync(pageIndex + 'showView', showView);
			this.showView = showView;
		},
		/**
		 * 商品搜索
		 */
		triggerSearch() {
			let pages = getCurrentPages();
			// 判断来源页面
			if (pages.length > 1 && pages[pages.length - 2].route === 'pages/search/index') {
				this.navigateBack();
				return;
			}
			// 跳转到商品搜索
			this.navigateTo({
				url: '/pageShop/search/index'
			});
		}
	}
};
</script>

<style>
.container {
	overflow: hidden;
}
.store_nav_cont {
	padding: 20rpx 0;
}

.store_nav_cont #list-true {
	color: #ff495e;
	font-size: 28rpx;
}

.store_nav_cont #list-0 {
	color: #333;
	font-size: 28rpx;
}

.store_nav_cont .price__text {
	font-size: 28rpx;
}
.store_nav_cont .price__arrow {
	padding-left: 20rpx;
	font-size: 18rpx;
	color: #777;
}

.store_nav_cont #list-true .price__arrow text.active {
	color: #ff495e;
}

.container {
	position: relative;
}

.index-cont-search icon {
	left: 0;
	margin-left: 20rpx;
}

.index-search-box {
	background: #fff;
	padding: 18rpx 13rpx;
	border-bottom: 1rpx solid #eee;
}

.index-search {
	border-bottom: 0;
	background: #fff;
	border-radius: 50rpx;
	overflow: hidden;
	position: relative;
	font-size: 32rpx;
	color: #999;
	box-sizing: border-box;
	height: 64rpx;
	line-height: 64rpx;
	margin: 0 10rpx;
}

.list-right {
	width: 60rpx;
}

.list-right text {
	height: 60rpx;
	line-height: 60rpx;
	font-size: 40rpx;
}

.list-header {
	position: fixed;
	top: calc(--window-top + 1rpx);
	left: 0;
	right: 0;
}

.no-more {
	text-align: center;
	color: #737373;
	padding: 20rpx 0;
}

.category-list {
	overflow: hidden;
}

.category-list .list {
	box-sizing: border-box;
	width: 50%;
	float: left;
}

.category-list .list:nth-child(2n) {
	border-left: 4rpx solid #f7f7f7;
	border-bottom: 8rpx solid #f7f7f7;
}

.category-list .list:nth-child(2n-1) {
	border-right: 4rpx solid #f7f7f7;
	border-bottom: 8rpx solid #f7f7f7;
}

.category-list .list .left,
.category-list .right {
	width: 100%;
}

.category-list .list .left .img image {
	width: 100%;
	height: 375rpx;
	display: block;
}

.category-list .right .cont {
	padding: 10rpx 12rpx;
}

.category-list .right .cont .title {
	height: 76rpx;
	line-height: 1.3;
}

.category-list.arrange .list {
	overflow: hidden;
	padding: 15rpx;
	border-bottom: 1rpx solid #f7f7f7;
	width: 100%;
}

.category-list.arrange .list text {
	line-height: 1.6;
}

.category-list.arrange .list .left {
	width: 35%;
	float: left;
}

.category-list.arrange .list .right {
	width: 65%;
	float: left;
}

.category-list.arrange .list .left .img image {
	width: 220rpx;
	height: 220rpx;
}

/* 商品卖点 */

.selling_point {
	width: 100%;
	font-size: 24rpx;
	line-height: 1.4;
	color: #ff495e;
}

.goods_sales {
	color: #999;
	font-size: 24rpx;
}

/* 商品价格 */

.detail-price {
	font-size: 24rpx;
}

.detail-price .goods-price {
	margin-right: 8rpx;
}

.detail-price .line-price {
	text-decoration: line-through;
}
</style>
